<template>
  <div class="root_view_css">
    <!-- 视频 -->
    <es-video-player
      ref="smallVideoPlayer"
      :player-width="smallPlayerConfig.width"
      :player-height="smallPlayerConfig.height"
      @onPlayerInitialized="onPlayerInitialized"
      @onPlayerCompleted="onPlayerCompleted"
      class="es-video-player"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent } from '@vue/runtime-core'
import { ref } from 'vue'
import {
  ESKeyCode,
  ESKeyEvent,
  ESLogLevel,
  useESEventBus,
  useESLog,
  useESToast
} from '@extscreen/es3-core'
import { useESRouter } from '@extscreen/es3-router'
import {
  ESIPlayer,
  ESMediaSource,
  ESMediaSourceList,
  ESPlayerPlayMode,
  ESPlayerAspectRatio
} from '@extscreen/es3-player'
import { ESVideoPlayer } from '@extscreen/es3-video-player'

const TAG = 'smallPlay'

export default defineComponent({
  name: 'small-screen-play',
  components: {
    'es-video-player': ESVideoPlayer
  },
  setup() {
    const router = useESRouter()
    const toast = useESToast()

    const log = useESLog()
    //设置最小打印级别
    log.setMinimumLoggingLevel(ESLogLevel.DEBUG)

    const smallPlayerConfig = ref({
      width: 730,
      height: 411
    })
    // 播放地址
    const mediaPlayUrl = ref('')
    // 播放器
    const smallVideoPlayer = ref<ESIPlayer>()

    // 生命周期 页面创建
    const onESCreate = (params) => {
      mediaPlayUrl.value =
        'http://extcdn.hsrc.tv/channelzero/2024/02/05/d477660a-3eb6-4c7f-b82b-0b61c035505c.mp4'
      smallVideoPlayer.value?.initialize()
    }

    const onESRestart = () => {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.d(TAG, 'restart')
      }
    }

    const onPlayerInitialized = (playerType) => {
      if (log.isLoggable(ESLogLevel.DEBUG)) {
        log.d(TAG, 'onPlayerInitialized   >>>')
      }
      let mediaSource: ESMediaSource = {
        uri: mediaPlayUrl.value
      }
      let mediaSourceList: ESMediaSourceList = {
        index: 0,
        list: [mediaSource]
      }
      smallVideoPlayer.value?.playMediaSourceList(mediaSourceList)
      smallVideoPlayer.value?.start(0)
      smallVideoPlayer.value?.setAspectRatio(ESPlayerAspectRatio.ES_PLAYER_AR_ASPECT_MATCH_PARENT)
    }

    // 播放完成事件
    async function onPlayerCompleted() {
    }

    function onBackPressed() {
      smallVideoPlayer.value?.stop()
      smallVideoPlayer.value?.release()
      router.back()
    }

    return {
      onESCreate,
      onESRestart,
      onBackPressed,

      smallPlayerConfig,
      onPlayerInitialized,
      onPlayerCompleted,
      smallVideoPlayer
    }
  }
})
</script>

<style scoped>
.root_view_css {
  width: 1920px;
  height: 1080px;
  background-color: transparent;
}

.es-video-player {
  position: absolute;
  left: 0;
  top: 0;
}

</style>
